<template>
    <div id="loginer">
        <div class="loginer-content">
            <h3 class="customManage_title">个人资料</h3>
            <div class="personInfo">
                <img src="../assets/images/touxiang.png" alt="">
                <h3>登录名称：{{profile.userName}}</h3>
                <ul>
                    <li>
                        <b></b>
                        <span>手机号码</span>
                        <span>{{profile.mobile || '--'}}</span>
                    </li>
                    <li>
                        <b></b>
                        <span>邮箱地址</span>
                        <span>{{profile.email || '--'}}</span>
                    </li>
                    <li>
                        <b></b>
                        <span>创建时间</span>
                        <span>{{profile.createTime || '--'}}</span>
                    </li>
                </ul>
            </div>
            <el-divider></el-divider>
            <h3 class="customManage_title">基本资料</h3>
            <el-tabs v-model="activeName">
                <el-tab-pane label="基本资料" name="first">
                    <el-form ref="form" :model="form" label-width="80px">
                            <el-form-item label="用户名称">
                                <el-input v-model="form.userName"></el-input>
                            </el-form-item>
                          <el-form-item label="手机号码">
                                <el-input type="number" v-model="form.mobile"></el-input>
                            </el-form-item>
                           <el-form-item label="E-MAIL">
                                <el-input v-model="form.email"></el-input>
                            </el-form-item>
                        </el-form>
                        <div class="groupBtn">
                            <el-button type="primary">关闭</el-button>
                            <el-button type="danger" @click="resetBaseinfo">保存</el-button>
                        </div>
                </el-tab-pane>
                <el-tab-pane label="修改密码" name="second">
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="旧密码">
                            <el-input type="password" v-model="form.password"></el-input>
                        </el-form-item>
                        <el-form-item label="新密码">
                            <el-input type="password" v-model="form.newPassword"></el-input>
                        </el-form-item>
                        <el-form-item label="确认新密码">
                            <el-input type="password" v-model="form.newPassword2"></el-input>
                        </el-form-item>
                    </el-form>
                    <div class="groupBtn">
                        <el-button type="primary">关闭</el-button>
                        <el-button type="danger" @click="resetPassword">保存</el-button>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
import '../assets/css/loginer.css'
export default {
    data(){
        return{
            activeName: 'first',
            form: {
                userName: '',
                loginName: '',
                password: '',
                newPassword: '',
                newPassword2: '',
                cusSub: '',
                email: '',
                mobile: ''
            },
            profile: {
                email: '',
                loginName: '',
                mobile: '',
                userName: '',
                userStatus: 1
            }
        }
    },
    mounted () {
        this.querySystemProfile()
    },
    methods: {
        async querySystemProfile () {
            this.profile = await this.$Api.systemProfile()
            this.form = { ...this.form, ...this.profile }
        },
        resetBaseinfo () {
            this.$Api.resetBaseinfo({
                id: this.form.id,
                userName: this.form.userName,
                mobile: this.form.mobile,
                email: this.form.email
            }).then(() => {
                // window.location.reload()
            })
        },
        resetPassword () {
            this.$Api.resetPassword({
                id: this.form.id,
                oldPass: this.form.password,
                newPass: this.form.newPassword
            })
        }
    }
}
</script>